#lunkuo1 {
    border-style: solid;
    /* 如果边框没有设置上面的样式，则边框100px则不可见； */
    border: l00px solid black;
	outline-style:solid;
    outline-color:red;
    outline-width:thin;
}

#lunkuo2 {
    
    border-style: solid;
    border: lpx solid black;
	outline-style:solid;
    outline-color:red;
    outline-width:medium;
}
#lunkuo3 {
 
    border-style: solid;   
    border:lpx solid black;
	outline-style:solid;
    outline-color:red;
    outline-width:thick;
}
#lunkuo4 {
   
    border-style: solid; 
    border:lpx solid black;
	outline-style:solid;
    outline-color:red;
    outline-width:3px;
}
/* 颜色反转为何上面的红和下面的红色不一样？ */
#lkreverse {
    /* border-style: solid; */
    border:1px solid rgb(221, 87, 87);
    outline-style: solid;
    outline-color: invert;
    outline-width: 5px;
}
#lksimple {
    outline: 5px solid yellow;
}
#outline-offset {
    border: 1px solid black;
    outline: 1px solid red;
    margin: 30px;
    outline-offset: 10px;
}

#outline-offset2 {
    margin: 30px;
    border: 1px solid black;
    background-color: yellow;
    outline: 1px solid red;
    outline-offset: 15px;
}

#text1 {
    text-align: left;
}

#text2 {
    border: 1px solid black;
    text-align: justify;
    padding: 10px;
    margin: 10px;
    /* 文字方向，从右向左 */
    direction: rtl;
    unicode-bidi: bidi-override;

    vertical-align: middle;
}

#text3 {
    /* 用于删除下划线 */
    text-decoration: none;
}
/* 12 */
#font {
    font: 20px Arial, sans-serif;
}

.glyphicon-cloud {
    font-size: 100px;
    color: rgb(179, 179, 242);
}

.glyphicon-thumbs-up {
    font-size: 100px;
    color: rgb(179, 179, 242);
}

/* 访问前：黑； 访问后，绿；  悬浮：粉色； 点击：橙色； */
a:link {
    color: black;
    background-color: #fff;
}    
a:visited {
    color: greenyellow;
    /* background-color: greenyellow; */
}
a:hover {
    color: pink;
    text-decoration: underline;
    background-color: pink;
}
a:active {
    color: orange;
    background-color: orange;
}

#link {
    text-decoration: none;
}

/* 链接按钮 */
#link2 {
    color: white;
}
#link2, a:link, a:visited{
    background-color: #f44336;
    padding: 15px;
    margin: 10px;
    text-align: center;
}

#link2, a:hover, a:active {
    text-decoration: none;
    background-color: red;
}

/* 13 */
ul.a {
    list-style-type: circle;
    /* list-style-image: url(../images/蓝天白云.jpg); */
    /* list-style-type: none; */
    padding: 0;
    margin: 0;
}
ul.b {
    list-style-position: outside;
}
ul.c {
    list-style-type: none;
    background-color: rgb(245, 238, 238);
    padding: 5px;
    margin: 5px;
    /* border: 10px solid white; */
    border-left:5px solid red;
}
ul.d{
    list-style-type:none;
    margin: 10px;
}
ul.d>li {
    padding: 5px;
    border: 1px solid gainsboro;
    border-collapse: collapse;
}
/* ?????一条线怎样合并成两条线？ */
/* ul.d li:last-child {
    border-bottom: none;
} */
/* 14-15聊天 */
/* 15:00 */
table {
    margin: 10px;
}
#customers {
    margin: 3px;
    /* 这个边框是整体表格的外边框； */
    border: 1px solid gainsboro;

    border-collapse: collapse;
    width: 100%;
}

#customers td, #customers th {
    padding: 8px;
    border: 1px solid rgb(218, 210, 210);
}
#customers th {
    color: rgb(243, 236, 236);
    background-color: rgb(103, 201, 103);
    /* padding: 10px; */
    text-align: center;
}
/* tr:first-child {
    padding: 10px;
} */


/* 一行灰色，一行白色如何实现？
行里面设置padding 为何没用？实现每行有相等的内边距；应该在每个单元格里面设置padding,而不是th,or tr里面设置；
*/
tr{
    border: 1px solid rgb(203, 200, 200);
    border-collapse: collapse;
    background-color: rgb(245, 239, 239);
    /* padding: 100px; 在th td单元格中设置 */
    text-align: left;
    font-family: "Lucida Console", "Courier New", monospace;
}


/* :nth-child(even)是什么意思？？ */
#customers tr:nth-child(even){
    background-color: #fff;
}
#customers tr:hover {
    background-color: rgb(199, 192, 192);
}
caption {
    caption-side: bottom;
}

/* 16 教弟弟绑鞋带*/
/* 17 */

/* .imgbox {
    border: 1px solid black;
}
#imgbox1 {
    display: none;
}
#imgbox2 {
    visibility: hidden;
} */

/* 
display:none;是从文档中删除元素；不会占据空间；
visibility:hidder;是隐藏元素，还会占据位置，但是不会占据任何空间； 
*/

/* 最大宽度主要是为了改善浏览器对小窗口的处理 */
.ex1, .ex2 {
    border: 2px solid greenyellow;
    padding: 5px;
    margin: 5px;
}
.ex1 {
    width: 500px;
}
.ex2 {
    max-width: 500px;
}

/* 18 */
#clip {
    clip: rect(0px 50px 200px 0px);
}

#overflowTest {
    /* 还有overflow-x, overflow-y属性，规定如何处理内容的上下，左右边缘； */
    overflow: auto;
    background-color: rgb(173, 233, 83);
    color: white;
}
.div1{
    float: left;
    border: 2px solid greenyellow;
    margin: 10px;
    padding: 10px;
}
.div2, .div4 {
    border: 2px solid red;
}
.div3 {
    float: left;
    border: 2px solid greenyellow;
    margin: 10px';
}
.div4 {
    /* div3向左浮动，则div4清除浮动； */
    clear: left;
}

/* 19:34 */
.clearfix {
        border: 2px solid greenyellow;
        font-size: large;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.img2 {
    float: right;
    padding: 10px;
    border-radius: 10px;
}

/* 如何让浮动框并排的占据屏幕？ 三个框 width:33.3% float:left; */
/* 添加border-sizing属性，确保框不会由于额外的内边距而损坏。 */
*{
    box-sizing: border-box;
}

.clearfix2 {
    padding: 20px;
    width: 100%;
}
.box {
    float: left;
    width: 33.33%;
    padding: 50px;
}

#float-daohang {
    list-style-type: none; /*去除列表项中的点*/
    text-decoration: none;
    background-color: black;
    clear: left;
    margin: 0;
    padding: 0;
    /* 列表项是行内元素，所以需要设置overflow来进行？？？？？ */
    overflow: hidden; 
    /* margin-top: 30px; */

}
li{
    float: left;
}
/* li a 和 li > a 区别？ */
li a {
    display: inline-block;/*用来？？*/
    color:white; /*??*/
    padding: 14px 16px;
    text-decoration: none;
    background-color: black;
}
a:hover {
    background-color: red;
}
a{
    color: white;
}